<!-- laout component -->
<template>
  <v-app :dark="dark">
    <!-- 左侧导航条 -->
    <v-navigation-drawer
      :dark="dark"
      :mini-variant="miniVariant"
      v-model="drawer"
      enable-resize-watcher
      :mini-variant-width="miniVariantWidth"
      fixed
      app
    >
      <v-toolbar flat>
        <v-list>
          <v-list-item>
            <v-list-item-avatar>
              <img src="../assets/2.jpeg" />
            </v-list-item-avatar>
            <v-list-item-content>
              <v-list-item-title>虎哥</v-list-item-title>
              <v-list-item-subtitle>管理员</v-list-item-subtitle>
            </v-list-item-content>
          </v-list-item>
        </v-list>
      </v-toolbar>
      <v-divider />
      <v-list flat>
        <v-list-group
          v-for="item in menuList"
          :key="item.id"
          v-model="item.active"
          :prepend-icon="item.action"
        >
          <template v-slot:activator>
            <v-list-item-content>
              <v-list-item-title v-text="item.title"></v-list-item-title>
            </v-list-item-content>
          </template>

          <v-list-item
            v-for="subItem in item.items"
            :key="subItem.id"
            :to="item.path + subItem.path"
          >
            <v-list-item-content>
              <v-list-item-title v-text="subItem.title"></v-list-item-title>
            </v-list-item-content>
            <v-list-item-action>
              <v-icon>{{ subItem.action }}</v-icon>
            </v-list-item-action>
          </v-list-item>
        </v-list-group>
      </v-list>
    </v-navigation-drawer>
    <v-app-bar :dark="dark" color="primary" app>
      <v-toolbar :dark="dark" color="primary" flat>
        <v-app-bar-nav-icon @click.stop="drawer=!drawer"></v-app-bar-nav-icon>
        <v-btn icon @click.stop="miniVariant = !miniVariant">
          <v-icon v-html="miniVariant ? 'chevron_right' : 'chevron_left'" />
        </v-btn>
        <!-- 切换黑暗主题 -->
        <v-flex xs1>
          <v-switch :label="dark ? '明亮':'暗黑' " v-model="dark" color="dark" hide-details />
        </v-flex>
        <!-- 顶部导航标题 -->
        <v-flex xs2></v-flex>
        <v-toolbar-title v-text="title" />
        <v-spacer />
        <!-- 调色板 -->
        <v-btn icon @click.stop="dark = !dark">
          <v-icon>invert_colors</v-icon>
        </v-btn>
        <!-- 顶部导航用户菜单 -->
        <v-btn icon @click.stop="dark = !dark">
          <v-icon>account_box</v-icon>
        </v-btn>
      </v-toolbar>
    </v-app-bar>
    <v-content app :dark="dark">
      <v-breadcrumbs :items="items">
        <template v-slot:divider>
          <v-icon>mdi-chevron-right</v-icon>
        </template>
      </v-breadcrumbs>
      <div>
        <!--定义一个路由锚点，Layout的子组件内容将在这里展示-->
        <router-view />
      </div>
    </v-content>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      dark: false, // 主体是否深色
      miniVariant: false, // 是否展示为mini图标
      drawer: true, // 左侧导航是否隐藏
      title: "乐优后台管理系统", // 导航标题
      miniVariantWidth: 200,
      menuList: [], // 菜单列表
      pathName: {},
      items: []
    };
  },

  created() {
    this.getMenuList();
  },
  computed: {
    path() {
      return this.$route.path;
    }
  },
  beforeMount() {},
  watch: {
    path() {
      this.items = this.getBreadItems();
    }
  },
  methods: {
    // 获取菜单项
    getMenuList() {
      this.axios.get("menu/list").then(resp => {
        // console.log(resp);
        if (resp.status != 200) {
          // 弹消息提示
        }
        this.menuList = resp.data;
        this.menuList[0]["active"] = true;
        // console.log(this.menuList)
        this.getPathname();
        // console.log(this.pathName.brand);
        this.items = this.getBreadItems();
      });
    },
    // 获取路径对应的名称数组
    getPathname() {
      this.menuList.forEach(item => {
        const p1 = item.path.slice(1);
        this.pathName[p1] = item.title;
        item.items.forEach(item1 => {
          this.pathName[item1.path.slice(1)] = item1.title;
        });
      });
    },
    // 生成面包屑标题数组
    getBreadItems() {
      const urls = this.$route.path.split("/");
      // console.log(urls[2])
      // console.log(this.pathName[urls[2]])
      // console.log(this.pathName);
      const item1 = this.pathName[urls[1]];
      const item2 = this.pathName[urls[2]];
      const bread = [
        {
          text: item1,
          disabled: true,
          href: "breadcrumbs_" + item1
        },
        {
          text: item2,
          disabled: true,
          href: "breadcrumbs_" + item2
        }
      ];
      // console.log(bread);
      return bread;
    }
  }
};
</script>

<style lang='scss' scoped>
</style>